<template>
  <a-row :gutter="[10, 10]">
    <!-- 策略文件列表 -->
    <a-col :span="24">
      <a-card title="策略文件管理">
        <a-button type="primary" @click="addStrategy" style="margin: 0 0 10px 0">新增策略文件</a-button>
        <a-table :columns="columns" :dataSource="strategyList" rowKey="key" bordered>
          <template #bodyCell="{ column, record }">
            <!-- 自定义操作列 -->
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="viewStrategy(record)">查看</a-button>
              <a-button v-if="record.status === '未使用'" type="link" danger @click="deleteStrategy(record)"> 删除 </a-button>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-col>

    <!-- 查看/新增/编辑策略文件对话框 -->
    <a-modal v-model:visible="isModalVisible" title="策略文件详情" @ok="handleOk" @cancel="handleCancel">
      <a-form :model="currentStrategy" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="策略名称">
          <a-input v-model:value="currentStrategy.name" disabled />
        </a-form-item>
        <a-form-item label="策略描述">
          <a-input v-model:value="currentStrategy.description" disabled />
        </a-form-item>
        <!-- 其他策略详细内容展示，如目标设定、能源来源管理等 -->
      </a-form>
    </a-modal>
  </a-row>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue';

  const strategyList = reactive([
    {
      key: '1',
      name: '综合优化策略',
      fileName: 'ComOpt240702.001',
      createDate: '2024-07-02',
      status: '已使用',
    },
    {
      key: '2',
      name: '需求侧响应策略',
      fileName: 'DSR240702.001',
      createDate: '2024-07-02',
      status: '未使用',
    },
    {
      key: '3',
      name: '离网/断网策略',
      fileName: 'OffGrid240702.001',
      createDate: '2024-07-02',
      status: '未使用',
    },
  ]);

  const columns = [
    { title: '策略名称', dataIndex: 'name', key: 'name' },
    { title: '文件名称', dataIndex: 'fileName', key: 'fileName' },
    { title: '创建日期', dataIndex: 'createDate', key: 'createDate' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '操作', key: 'action' },
  ];

  const isModalVisible = ref(false);
  const currentStrategy = reactive({});

  // 查看策略文件详情
  const viewStrategy = (record) => {
    Object.assign(currentStrategy, record); // 复制当前策略文件内容
    isModalVisible.value = true;
  };

  // 新增策略文件
  const addStrategy = () => {
    message.info('新增策略文件功能，选择已有策略文件或基于某个策略新增');
    // 新增逻辑，根据现有策略进行新增
  };

  // 删除策略文件
  const deleteStrategy = (record) => {
    if (record.status === '已使用') {
      message.error('此策略文件已使用，无法删除');
    } else {
      strategyList.splice(strategyList.indexOf(record), 1);
      message.success('策略文件已删除');
    }
  };

  // 确认关闭模态框
  const handleOk = () => {
    isModalVisible.value = false;
  };

  // 取消模态框
  const handleCancel = () => {
    isModalVisible.value = false;
  };
</script>

<style scoped>
  .custom-button {
    margin: 0 0 10px 0; /* 设置上方按钮的 margin */
  }
</style>
